import _ from 'underscore'
import dispatcher from 'lib/dispatcher'
import {Scope} from 'lib/scopeFactory'

import TimeStore from 'lib/stores/time-store'
import {coreApi,sortMap,parseToChart} from '../apis/core-util'
import basicInfo from '../apis/basicInfo'
import {tracelistApi,createGridOrder,parseToPartGrid} from '../apis/tracelist'
export default class MainScope extends Scope {
  constructor(props){
    super();
    this.domainId = props.routeParams.domainId
    this.urlId = props.routeParams.urlId
    this.$state = {
      title:'',
      chart0:{
        loading:true
      },
      chart_percentile:{
        loading:true
      },
      chart1:{
        loading:true
      },
      chart2:{
        loading:true
      },
      chart3:{
        loading:true
      },
      grid:{
        loading:true,
        getOrder:createGridOrder('totalTime',-1),
        fetch:this.fetchGrid.bind(this)
      }
    }
    if(this.urlId){
      this.basicInfo = basicInfo({
        id:this.urlId,
        parentId:this.domainId,
        urlName:'url'
      })
    }else{
      this.basicInfo = basicInfo({
        id:this.domainId,
        urlName:'url'
      })
    }
    this.chart0Api = coreApi({
      limit:5,
      classify:'url',
      classifyKeyField:'time',
      classifyCountField:'num',
      viewKey:'avg_resp',
      urlName:'httptransaction'
    },TimeStore.getValue,function (){
      return {order:sortMap[this.viewKey]}
    },function(){
      if(this.urlId){
        return {
          urlId:this.urlId,
          domainId:this.domainId
        }
      }else{
        return {
          domainId:this.domainId
        }
      }
    }.bind(this));
    // this.chartPercentileApi = coreApi({
    //   urlName:'httpPtTime',
    //   ptType:[99,95,90,50],
    //   classifyKeyField:'time',
    //   classifyCountField:'num',
    //   viewKey:'percentile_resp'
    // },TimeStore.getValue,() => {
    //   if(this.urlPatternId){
    //     return {
    //       urlPatternId:this.urlPatternId,
    //       domainId:this.domainId
    //     }
    //   }else{
    //     return {
    //       domainId:this.domainId
    //     }
    //   }
    // })
    this.chart1Api = coreApi({
      limit:5,
      classify:'url',
      classifyKeyField:'time',
      classifyCountField:'num',
      viewKey:'thp',
      urlName:'httptransaction'
    },TimeStore.getValue,function(){
      return {order:sortMap[this.viewKey]}
    },() => {
      if(this.urlId){
        return {
          urlId:this.urlId,
          domainId:this.domainId
        }
      }else{
        return {
          domainId:this.domainId
        }
      }
    });
    this.chart2Api = coreApi({
      limit:5,
      classify:'url',
      viewKey:'error_rate',
      errorCode:'0',
      urlName:'errorrate'
    },TimeStore.getValue,function (){
      return {order:sortMap[this.viewKey]}
    },() => {
      if(this.urlId){
        return {
          urlId:this.urlId,
          domainId:this.domainId
        }
      }else{
        return {
          domainId:this.domainId
        }
      }
    });
    this.chart3Api = coreApi({
      limit:5,
      classify:'url',
      viewKey:'error_rate',
      statusCode:'400',
      urlName:'errorrate'
    },TimeStore.getValue,function (){
      return {order:sortMap[this.viewKey]}
    },() => {
      if(this.urlId){
        return {
          urlId:this.urlId,
          domainId:this.domainId
        }
      }else{
        return {
          domainId:this.domainId
        }
      }
    });
    this.gridApi = tracelistApi({
      urlName:'httptransactionlist',
      totalTimeFloor: 0.4
    },TimeStore.getValue,this.$state.grid.getOrder,() => {
      if(this.urlId){
        return {
          urlId:this.urlId,
          domainId:this.domainId
        }
      }else{
        return {
          domainId:this.domainId
        }
      }
    });
  }
  fetch(){
    var _this = this
    this.chart0Api.fetch().then((data,params) => {
      this.$state.chart0 = {
        data:parseToChart(data,params)
      }
    },(err) => {
      this.$state.chart0 = {
        error:err
      }
    },(params) => {
      this.$state.chart0 = {
        loading:true,
        params:params
      }
      this.emit()
    }).always(() => {
      this.emit()
    })
    // this.chartPercentileApi.fetch().then((data,params) => {
    //   var parseData = parseToChart(data,params)
    //   parseData.yAxis.plotLines = [{
    //     color:'#FF0000',
    //     value:2,
    //     width:2,
    //     label:{
    //       text:'基线'
    //     }
    //   }]
    //   this.$state.chart_percentile = {
    //     data:parseData
    //   }
    // },(err) => {
    //   this.$state.chart_percentile = {
    //     error:err
    //   }
    // },(params) => {
    //   this.$state.chart_percentile = {
    //     loading:true,
    //     params:params
    //   }
    //   this.emit()
    // }).always(() => {
    //   this.emit()
    // })
    this.chart1Api.fetch().then((data,params) => {
      this.$state.chart1 = {
        data:parseToChart(data,params)
      }
    },(err) => {
      this.$state.chart1 = {
        error:err
      }
    },(params) => {
      this.$state.chart1 = {
        loading:true,
        params:params
      }
      this.emit()
    }).always(() => {
      this.emit()
    })
    this.chart2Api.fetch().then((data,params) => {
      this.$state.chart2 = {
        data:parseToChart(data,params)
      }
    },(err) => {
      this.$state.chart2 = {
        error:err
      }
    },(params) => {
      this.$state.chart2 = {
        loading:true,
        params:params
      }
      this.emit()
    }).always(() => {
      this.emit()
    })
    this.chart3Api.fetch().then((data,params) => {
      this.$state.chart3 = {
        data:parseToChart(data,params)
      }
    },(err) => {
      this.$state.chart3 = {
        error:err
      }
    },(params) => {
      this.$state.chart3 = {
        loading:true,
        params:params
      }
      this.emit()
    }).always(() => {
      this.emit()
    })
    this.fetchGrid()
  }
  fetchGrid(){
    var _this = this
    this.gridApi.fetch().then(function gridHandle(data,params){
      _this.$state.grid = parseToPartGrid(data,params)
    },function(err){
      _this.$state.grid = {
        error:err
      }
    },function(params){
      _this.$state.grid = {
        loading:true,
        params:params
      }
      _this.emit()
    }).always(function(){
      _this.emit()
    })
  }
  $settime(payload){
    this.fetch()
  }
  $unload(){
  }
  $load(){
    var _this = this
    this.basicInfo.fetch().done(function(data){
      //TODO 当basicInfo查不到时应显示错误,可以在Router.transtition时加载basicInfo并判断
      _this.$state.title = data.result[0].name;
      _this.emit()
    })
    this.fetch();

  }
}
